const olis = document.querySelectorAll("main>ul>li");
const oboxs = document.querySelectorAll("main div .box1");

const lou = document.querySelector(".xbig .lou");
const ops = document.querySelectorAll(".xbig .lou p");

const lis = document.querySelectorAll(".xbig .kuan li");
const ps = document.querySelectorAll(".xbig .hui p");

const kuan = document.querySelector(".xbig .kuan")
const to = document.querySelector(".xbig .hui #hui5");

const suo = document.querySelector("#suo");
const xiaLa = document.querySelector(".xbig .xiaLa");


//楼层功能
document.onscroll = function(){
    const otop = document.documentElement.scrollTop;
        if(otop > 1500){
            lou.style.display = "block";
        }else{
            lou.style.display = "none";
        }
        if(otop > 600){
            kuan.style.display = "block";
        }else{
            kuan.style.display = "none";
        }
}
let timea ;
ops.forEach((val,idx)=>{
    ops[0].onclick = function (){
        clearInterval(timea);
        timea = setInterval(()=>{
            document.documentElement.scrollTop -= 300 ;
            if(document.documentElement.scrollTop = 1600 ){
                clearInterval(timea);
            }
        },40)
        
    }
    ops[1].onclick = function (){
        document.documentElement.scrollTop = 2320 ;
    }
    ops[2].onclick = function (){
        document.documentElement.scrollTop = 3040 ;
    }
    ops[3].onclick = function (){
        document.documentElement.scrollTop = 3760 ;
    }
    ops[4].onclick = function (){
        document.documentElement.scrollTop = 4480 ;
    }
    ops[5].onclick = function (){
        document.documentElement.scrollTop = 5200;
    }
    ops[6].onclick = function (){
        document.documentElement.scrollTop = 5920 ;
    }
    ops[7].onclick = function (){
        document.documentElement.scrollTop = 6640;
    }
})

//选项卡功能
olis.forEach((val,idx)=>{
    val.onmouseover = function(){
        oboxs[idx].style.display="block";
    }
    val.onmouseout = function(){
        oboxs[idx].style.display="none";
    }
    oboxs[idx].onmouseover = function(){
        oboxs[idx].style.display="block";
    }
    oboxs[idx].onmouseout = function(){
        oboxs[idx].style.display="none";
    }
})
   



//返回顶层的显示 隐藏功能
lis.forEach((val,idx)=>{
    val.onmouseover = function(){
        ps[idx].style.display = "block";
    }
    val.onmouseout = function(){
        ps[idx].style.display = "none";
    }
    ps[idx].onmouseover = function (){
        ps[idx].style.display = "block";
    }
    ps[idx].onmouseout = function (){
        ps[idx].style.display = "none";
    }
})
let time ;
to.onclick = function(){
    clearInterval(time);
    time = setInterval(()=>{
        document.documentElement.scrollTop -= 300;
        if(document.documentElement.scrollTop === 0){
        clearInterval(time)
        }
    },40)  
}

// 搜索下拉框的显示隐藏
let flag = 0 ;
/* suo.onclick = function (){
    if (flag === 0 ){
        xiaLa.style.display = "block" ;
        flag = 1 ;
    }else{
        xiaLa.style.display = "none";
        flag = 0 ;
    }
} */


//轮播图1
function Banner(ops = {}) {
    this.box = ops.box;
    this.imgs = ops.imgs;
    this.btns = ops.btns === undefined ? true : ops.btns;
    this.list = ops.list === undefined ? true : ops.list;
    this.autoPlay = ops.autoPlay === undefined ? true : ops.autoPlay;
    this.index = ops.index || 0;
    this.delayTime = ops.delayTime || 3000;
    this.prev = null;
    this.createImgbox();
    if (this.btns) {
        this.createBtns();
        this.addBtnsEvent();
    }
    if (this.list) {
        this.createList();
        this.addListEvent();
    }
    if (this.autoPlay) {
        this.play();
    }
}

Banner.prototype.createList = function () {
    this.listBox = createEle("list", this.box);
    str = "";
    this.imgs.forEach((val, idx) => {
        str += `<span></span>`
    })
    this.listBox.innerHTML = str;
    this.listBox.children[this.index].className = "active";
}

Banner.prototype.createBtns = function () {
    this.btnsBox = createEle("btns", this.box);
    this.left = createEle("left", this.btnsBox);
    this.right = createEle("right", this.btnsBox);
    this.left.innerHTML = "&lt;";
    this.right.innerHTML = "&gt;";
}

Banner.prototype.createImgbox = function () {
    this.imgbox = createEle("imgbox", this.box);
    let str = "";
    this.imgs.forEach(val => {
        str += `<a href="${val.href}"><img src="${val.src}" alt="${val.alt}" title="${val.title}"></a>`;
    })
    this.imgbox.innerHTML = str;
    this.imgbox.children[this.index].style.left = "0";
}

Banner.prototype.addBtnsEvent = function () {
    const that = this;
    this.left.onclick = function () {
        that.changeIndex(1);
    }
    this.right.onclick = function () {
        that.changeIndex(2);
    }
}

Banner.prototype.changeIndex = function (d) {
    if (d === 1) {
        if (this.index === 0) {
            this.index = this.imgs.length - 1;
            this.prev = 0;
        } else {
            this.index--;
            this.prev = this.index + 1;
        }
        this.move(this.prev, this.index, 1);
    } else {
        if (this.index === this.imgs.length - 1) {
            this.index = 0;
            this.prev = this.imgs.length - 1
        } else {
            this.index++;
            this.prev = this.index - 1;
        }
        this.move(this.prev, this.index, -1);
    }
}

Banner.prototype.move = function (prev, now, d) {
    const imgs = this.imgbox.children;
    imgs[prev].style.left = 0;
    move(imgs[prev], {
        left: imgs[0].offsetWidth * d
    });
    imgs[now].style.left = -imgs[0].offsetWidth * d + "px";
    move(imgs[now], {
        left: 0
    });
    if (this.list) {
        this.listBox.children[prev].className = "";
        this.listBox.children[now].className = "active";
    }
}

Banner.prototype.addListEvent = function () {
    const items = this.listBox.children;
    const that = this;
    for (let i = 0; i < items.length; i++) {
        items[i].index = i;
        items[i].onclick = function () {
            if (this.index > that.index) {
                that.move(that.index, this.index, -1);
            }
            if (this.index < that.index) {
                that.move(that.index, this.index, 1);
            }
            that.index = this.index;
        }
    }
}

Banner.prototype.play = function () {
    const that = this;
    let t = setInterval(() => {
        this.changeIndex(2);
    }, this.delayTime);
    this.box.onmouseenter = function () {
        clearInterval(t); 
    }
    this.box.onmouseleave = function () {
        t = setInterval(() => {
            that.changeIndex(2);
        }, that.delayTime);
    }
}



function createEle(className, parent) {
    const ele = document.createElement("div")
    ele.className = className;
    parent.appendChild(ele);
    return ele;
}


const box = document.querySelector(".banner");
const imgs = [{
    src: "./masge/hp_autumn_20220915.jpg",
    title: "广告1",
    href: "banner1",
    alt: "这是广告1"
}, {
    src: "./masge/hp_autumn_20220922.jpg",
    title: "广告2",
    href: "banner2",
    alt: "这是广告2"
}, {
    src: "./masge/hp_cbeauty20220922_20220922.jpg",
    title: "广告3",
    href: "banner3",
    alt: "这是广告3"
}, {
    src: "./masge/hp_weeklyspecial_20220915.jpg",
    title: "广告4",
    href: "banner4",
    alt: "这是广告4"
}, {
    src: "./masge/hp_hourglass20220922_20220922.jpg",
    title: "广告5",
    href: "banner5",
    alt: "这是广告5"
}, {
    src: "./masge/hp_weeklyspecial_20220915.jpg",
    title: "广告6",
    href: "banner6",
    alt: "这是广告6"
}, {
    src: "./masge/hp_cbeauty20220922_20220922.jpg",
    title: "广告7",
    href: "banner7",
    alt: "这是广告7"
}];

// 执行轮播图功能，传入指定参数
new Banner({
    box, imgs,
    // index: 5
    // btns: false,
    // list: true,
    // autoPlay: true,
    // delayTime: 3000,
});
